读[跨终端Web]有感
徐凯 著 2014年6月第一版
写在最前
花了2个小时左右看完了这本书，这本书的出版时间有点早了，距现在有4年时间了，在前端行业里算是老书了。不过里面有的思想还是很好的。是一本好书。分享点我感觉挺好的知识点吧。
关于跨终端
实现跨终端的方式有很多种，如
- 响应式
- 多站点
- 多模板
- 多平台
PS：渐进增强和优雅退化依旧是重要的前端开发思想，问题要以移动优先。
响应式的瓶颈
响应式不能解决移动端DOM冗余的问题，JS脚本冗余也是问题。响应式还存在内在耦合性。响应式本质上是依靠CSS处理展现层面的差异。
多站点
什么意识呢，就是一个主域名的站点，有很多二级子域的站点。比如一个站点是example.com的PC端产品首页，它有很多地址，如：www.example.com、wap.example.com、m.example.com、hd.example.com、iphone.example.com、ipad.example.com等。但是子域名太多会加大服务器维护跳转的成本。
多模板
是响应式和多站点相结合的一种方案。多模板的的优点在于一个页面只有一个URL，无须服务器端复杂的URL映射规则和终端检测等手段进行跳转。
多平台
就是现在的Native App。
关于跨域存储
出于安全考虑，localhost存储的数据不能跨子域访问(即使修改document.domain)，比如数据存在代理页b.com所在域，宿主页a.com通过与代理页的跨域通信存储数据，跨域通信使用的是postMessage，postMessage不会改写document.domain。
存储方案
使用store.js 地址：
store.js是一个跨终端、跨域的存储组件
- 稳定可靠，10亿级日调用次数的考研。
- 兼容IE6
- 完美支持移动浏览器
- 跨子域、主域的数据存取，且不改写document.domain
- 支持Object、Array等复杂对象存取
跨域方案
使用iframe加载代理页，数据存储在代理页所在的域下，需要实现宿主页与代理页之间的通信，postMessage + window.name
跨域本质上是通信问题，也就是建立通信通道。常见的跨域通信方案有：JSONP、Window.name、CORS、document.domain、postMessage等。具体的看我写的这篇文章。
- iframe场景下使用
- 不该写document.doomain
- 跨子域、跨主域
- 不使用flash
满足上面要求的只有postMessage、window.name
异常处理
如果代理页或者其他异常导致不能进行数据存取，那么success回调的参数为undefined。并不会阻塞回调，更不会导致整个流程的阻塞。这就是 电梯永远不会坏的思想，即所有的调用都只有success一个回调。
安全性
由于数据存储在代理页所在的域，数据可被所有能够加载代理页的宿主页面访问。所有要在服务端控制代理页面的访问来源。下面的设置可以限制第三方访问存储的数据
- 代理页部署至特定服务器，服务器控制访问来源(推荐采取白名单机制)
- 实例化Store设置代理页地址参数proxy